<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入antd样式-->
<link rel="stylesheet" type="text/css" href="css/libs/antd.css"/>
<!-- 自定义样式 -->
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<!--引入VUE-->
<script src="js/libs/vue.js" type="text/javascript" charset="utf-8"></script>
<!-- moment -->
<script src="js/libs/moment.js" type="text/javascript" charset="utf-8"></script>
<!-- antd -->
<script src="js/libs/antd.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  
<div id="app" v-cloak>
  
  <a-layout style='height: 100%;'>
    <a-layout-content>
      <a-row style='height: 100%;'>
        <a-col :span="10" style='height: 100%;background: #fff;overflow: auto;'>
          <div style="padding:50px 30px 50px 0;" class="form">
            
            <!-- 卡牌类型 -->
            <a-row>
              <a-col :span='4' style='text-align: right;line-height: 32px;'>卡牌类型：</a-col>
              <a-col :span='20'>
                <a-select v-model='options.type' style="width: 240px" @change='typeChange'>
                  <a-select-option v-for='item in cardType' key='item.key' :value="item.key">{{item.name}}</a-select-option>
                </a-select>
              </a-col>
            </a-row>
            <!-- 卡牌类型 end -->
            
            <!-- 卡牌列表 -->
            <a-row>
              <a-col :span='4' style='text-align: right;line-height: 32px;'>卡牌列表：</a-col>
              <a-col :span='20'>
                <a-select v-model='options.list' style="width:240px">
                  <a-select-option v-for='item in cardList' key='item.key' :value="item.key">{{item.name}}{{options.type == '0' ? '怪兽' : (options.type == '1' ? '魔法' : '陷阱')}}</a-select-option>
                </a-select>
              </a-col>
            </a-row>
            <!-- 卡牌列表 end -->
            
            <!-- 卡牌名称 -->
            <a-row>
              <a-col :span='4' style='text-align: right;line-height: 32px;'>卡牌名称：</a-col>
              <a-col :span='20'>
                <a-input v-model='options.name' placeholder='请输入卡牌名称' />
              </a-col>
            </a-row>
            <!-- 卡牌名称 end -->
            
            <!-- 怪兽属性 -->
            <template v-if='options.type == "0"'>
              <a-row>
                <a-col :span='4' style='text-align: right;line-height: 32px;'>怪兽属性：</a-col>
                <a-col :span='20'>
                  <a-select v-model='options.nature' style="width:120px">
                    <a-select-option v-for='item in cardNature' key='item.key' :value="item.key">{{item.name}}</a-select-option>
                  </a-select>
                </a-col>
              </div>
            </template>
            <!-- 怪兽属性 end -->
            
            <!-- 怪兽种族 -->
            <template v-if='options.type == "0"'>
              <a-row>
                <a-col :span='4' style='text-align: right;line-height: 32px;'>怪兽种族：</a-col>
                <a-col :span='20'>
                  <a-select v-model='options.race' style="width:240px">
                    <a-select-option v-for='item in cardRace' key='item.key' :value="item.key">{{item.name}}</a-select-option>
                  </a-select>
                </a-col>
              </div>
            </template>
            <!-- 怪兽种族 -->
            
            <!-- 怪兽等级或阶级 -->
            <template v-if='options.type == "0"'>
              <a-row>
                <a-col :span='4' style='text-align: right;line-height: 32px;'>怪兽{{options.list == '5' ? '阶级' : '等级'}}：</a-col>
                <a-col :span='20'>
                  <a-select v-model='options.level' style="width:120px">
                    <a-select-option v-for='item in 12' key='item' :value="item">{{item}}{{options.list == '5' ? '阶' : '级'}}</a-select-option>
                  </a-select>
                </a-col>
              </div>
            </template>
            <!-- 怪兽等级或阶级 end -->
            
            <!-- 卡图 -->
            <a-row>
              <a-col :span='4' style='text-align: right;line-height: 32px;'>上传卡图：</a-col>
              <a-col :span='20'>
                <label class="upload" type='primary'>点击上传
                  <input type="file" hidden="hidden" @change="uploadFile" accept="image/*" />
                </label>
                <a-avatar shape="square" :size="180" :src='options.avatar' v-if='options.avatar' style='border: 1px solid #eee;margin-top: 20px;' />
              </a-col>
            </a-row>
            <!-- 卡图 end -->
            
            <!-- 效果描述 -->
            <a-row>
              <a-col :span='4' style='text-align: right;line-height: 32px;'>效果描述：</a-col>
              <a-col :span='20'>
                <a-textarea :maxlength='330' v-model='options.desc' placeholder="请输入该卡牌的效果描述" :autosize="{ minRows:5, maxRows: 10 }" />
              </a-col>
            </a-row>
            <!-- 效果描述 end -->
            
            <template v-if='options.type == "0"'>
              <!-- 攻击力 -->
              <a-row>
                <a-col :span='4' style='text-align: right;line-height: 32px;'>攻击力：</a-col>
                <a-col :span='20'>
                  <a-input-number style='width:240px' v-model='options.atk' :min='0' placeholder='请输入攻击力数值' />
                </a-col>
              </a-row>
              <!-- 攻击力 end -->
              
              <!-- 守备力 -->
              <a-row>
                <a-col :span='4' style='text-align: right;line-height: 32px;'>守备力：</a-col>
                <a-col :span='20'>
                  <a-input-number style='width:240px' :min='0' v-model='options.def' placeholder='请输入守备力数值' />
                </a-col>
              </a-row>
              <!-- 守备力 end -->
            </template>
            
            <!-- 调整缩放 -->
            <a-row>
              <a-col :span='4' style='text-align: right;line-height: 32px;'>调整缩放：</a-col>
              <a-col :span='20' style='margin-top: -4px;'>
                <a-slider style='width: 80%;' v-model="rate" :min='50' :tooltipVisible="true" />
              </a-col>
            </a-row>
            
           <a-row>
              <a-col :span='20' :offset='4'>
                <a-button type='primary' @click='renderCard' size='large'>生成卡牌</a-button>
                <a style='margin-left: 10px;' @click='handleCancel'>查看已制作的卡牌列表 ></a>
              </a-col>
            </a-row>
            
          </div>
        </a-col>
        <a-col :span="14" style='height: 100%;background: #555;position: relative;overflow:auto;padding: 50px 0;'>
          <canvas id="canvas" width='697' height='1016'></canvas>
        </a-col>
      </a-row>
      
    </a-layout-content>
  </a-layout>
  
  <a-modal
    title="卡牌列表"
    :width='1300'
    v-model="visible"
    :footer='null'
    @cancel="handleCancel"
  >
    <table id="myTable" width="100%" cellpadding="0" cellspacing="0" border="1" bordercolor="#ddd">
      <thead style="background: #fafafa;">
        <th width="54">序号</th>
        <th width='80'>预览图</th>
        <th>卡种</th>
        <th>名称</th>
        <th>属性</th>
        <th>种族</th>
        <th>等级/阶级</th>
        <th width='30%'>效果</th>
        <th>攻击力</th>
        <th>守备力</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="(item,index) in data" v-key='item.id'>
          <td>{{index+1}}</td>
          <td>
            <div style="width: 60px;height: 60px;overflow: hidden;">
              <img :src="item.url" style='width:100%;height:100%;display: block;' >
            </div>
          </td>
          <td>{{cardList[item.list].name+(item.type === '0' ? '怪兽' : item.type === '1' ? '魔法' : '陷阱')}}</td>
          <td>{{item.name || '-'}}</td>
          <td>{{item.type === '0' ? cardNature[item.nature].name : '-'}}</td>
          <td>{{item.type === '0' ? cardRace[item.race].name : '-'}}</td>
          <td>{{item.type === '0' ? item.level : '-'}}</td>
          <td>{{item.desc || '-'}}</td>
          <td>{{item.type === '0' ? item.atk : '-'}}</td>
          <td>{{item.type === '0' ? item.def : '-'}}</td>
          <td>
            <a :href="item.url" :download="item.name+'.png'" style='color: #096DD9;'>下载</a>
            <span style='padding: 0 5px;'>|</span>
            <a @click="deleteCard(item.id)" style='color: #096DD9;'>删除</a>
          </td>
        </tr>
        <tr v-if="data.length === 0">
          <td colspan="11" style='padding: 50px 0; text-align: center;'>
            暂无数据
          </td>
        </tr>
      </tbody>
      
    </table>
  </a-modal>
</div>


<!--引入游戏王卡牌基本配置-->
<script src="js/config/config.js" type="text/javascript" charset="utf-8"></script>
<!--当前页逻辑-->
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入制作卡牌方法 -->
<script src="js/createCard.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>
